<template>
    <div>
        <!-- <div>modelValue from props: {{ modelValue }}</div>
        <div>
            <input style="height: 40px; border-radius: 10px;" type="text" v-model="firstName" />
        </div>
        <div>
            <input style="height: 40px; border-radius: 10px;" type="text" v-model="lastName" />
        </div>
        <div>
            <input style="height: 40px; border-radius: 10px;" type="text" v-model="modelValue" />
        </div>

        <hr>
        <div> Test object model value
        </div> -->
        <div>Use Props to handle</div>
        <div>
            <input style="height: 40px; border-radius: 10px;" type="text" v-model="person.name" />
            <input style="height: 40px; border-radius: 10px;" type="text" v-model="person.company" />
            <input style="height: 40px; border-radius: 10px;" type="text" v-model="person.addr" />
        </div>


        <slot></slot>
    </div>
</template>
<script setup lang="ts">
const props = defineProps<{ person: { name: string, company: string, addr: string } }>()
// const lastName = defineModel('lastName')
// const modelValue = defineModel('modelValue')
</script>